import React from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { ComplexDateC } from '../../comps';
import moment from 'moment';

class ComplexDateDemo extends React.Component {
  // 2018-12-31~2020-07-30
  render() {
    return (
      <div style={{ padding: '20px', width: '800px' }}>
        <ComplexDateC
          form={this.props.form} // form对象
          title='日期区间' // 显示名称
          selectIndex='select1' // Form识别的下拉选项Item ID
          startIndex='start1' // Form识别的开始时间Item ID
          endIndex='end1' // Form识别的结束时间Item ID
          startOnChange={(e) => console.log(e)} // 起始时间变化事件
          endOnChange={(e) => console.log(e)} // 结束时间变化事件
          selOnChange={(e) => console.log(e)} // 下拉选择变更事件
          hasDataBD={moment('2018-12-31')} // 有数据的的起始时间,若不传，则该字段不影响起止时间的计算，若获取的有数据的时段为空，则需传null，此时会影响起止时间的计算和自由选择时可选时间范围的选择
          hasDataED={moment('2020-07-30')}
        />
        <ComplexDateC
          form={this.props.form} // form对象
          title='日期区间' // 显示名称
          selectIndex='select2' // Form识别的下拉选项Item ID
          startIndex='start2' // Form识别的开始时间Item ID
          endIndex='end2' // Form识别的结束时间Item ID
          startOnChange={(e) => console.log(e)} // 起始时间变化事件
          endOnChange={(e) => console.log(e)} // 结束时间变化事件
          selOnChange={(e) => console.log(e)} // 下拉选择变更事件
          selfDefination={['0', '1', '2', '3', '4', '5', '6', '7', '8']}
        />
      </div>
    );
  }
}

export default Form.create()(ComplexDateDemo);
